<template>
	<view>
		<!-- 用户信息 -->
		<view class="header">
			<view v-if="userInfo.nickName">
				<view class="avatar">
					<u-avatar :src="userInfo.avatarUrl" size="160" mode="circle"></u-avatar>
				</view>
				<view class="personal">
					<view class="username">
						{{userInfo.nickName}}
					</view>
					<view class="introduce">
						{{userInfo.userNote}}
					</view>
				</view>
			</view>
			<view class="login" v-else>
				<button type="default" @click="getUserProfile">授权登录</button>
			</view>
		</view>
		<!-- 动态 关注 点赞 -->
		<view class="link-part">
			<view class="link">
				<navigator url="./dynamic">
					<view class="link-up">
						{{dynamic}}
					</view>
					<view class="link-down">
						动态
					</view>
				</navigator>
			</view>
			<view class="link">
				<navigator url="./attention">
					<view class="link-up">
						{{attention}}
					</view>
					<view class="link-down">
						关注
					</view>
				</navigator>
			</view>
			<view class="link">
				<navigator url="./like">
					<view class="link-up">
						{{like}}
					</view>
					<view class="link-down">
						点赞
					</view>
				</navigator>
			</view>
		</view>
		<!-- 中部 -->
		<view class="content">
			<view class="content-up" v-if="userInfo.nickName">
				<navigator url="./information" class="list information">
					<image src="../../static/information.png" mode="aspectFit"></image>
					<view class="txt">
						个人信息
					</view>
				</navigator>
				<view class="hr"></view>
				<navigator url="./setting" class="list setting">
					<image src="../../static/setting.png" mode="aspectFit"></image>
					<view class="txt">
						课表更新
					</view>
				</navigator>
			</view>
			<view class="content-down">
				<navigator url="./feedback" class="list feedback">
					<image src="../../static/feedback.png" mode="aspectFit"></image>
					<view class="txt">
						问题反馈
					</view>
				</navigator>
				<view class="hr"></view>
				<navigator url="./about" class="list about">
					<image src="../../static/about.png" mode="aspectFit"></image>
					<view class="txt">
						关于我们
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					avatarUrl: '',
					nickName: '',
					userNote: ''
				},
				dynamic: 0,
				attention: 0,
				like: 0
			}
		},
		onLoad() {
			this.userInfo.avatarUrl=uni.getStorageSync('avatarUrl')
			this.userInfo.nickName=uni.getStorageSync('nickName')
			this.userInfo.userNote=uni.getStorageSync('userNote')
			this.$request({
				method: 'GET', // 默认GET
				url: '/v1/person/getNum',
				data: {
					token: uni.getStorageSync('token')
				},
				header: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
			}).then(res => {
				this.dynamic = res.data.dtNum;
				this.attention = res.data.gzNum;
				this.like = res.data.dzNum;
			}).catch(res => {
				// 失败后执行
			})
		},
		methods: {
			getUserProfile() {
				uni.getUserProfile({
					desc: "获取用户个人信息",
					success: (res) => {
						console.log(res.userInfo);
						this.userInfo.avatarUrl = res.userInfo.avatarUrl;
						this.userInfo.nickName = res.userInfo.nickName;
						uni.setStorage({
							key: 'avatarUrl',
							data: res.userInfo.avatarUrl
						});
						uni.setStorage({
							key: 'nickName',
							data: res.userInfo.nickName
						});
					}
				})
			}
		}
	}
</script>

<style>
	/* header */
	.header {
		padding: 48rpx;
		height: 260rpx;
		background-color: white;
	}

	.login button {
		width: 50%;
		margin-top: 60rpx;
	}

	.avatar {
		float: left;
		height: 100%;
		width: 32%;
	}

	.username {
		font-family: FZZJ-YZDKJW;
		font-size: 48rpx;
		line-height: 100rpx;
	}

	.introduce {
		font-family: FZZJ-FYJW;
		font-size: 24rpx;
		height: 72rpx;
		overflow: hidden;
	}

	/* link-part */
	.link-part {
		background-color: white;
		height: 140rpx;
		display: flex;
		align-items: center;
	}

	.link {
		line-height: 50rpx;
		flex: 1;
		text-align: center;
	}

	/* content */
	.content-up,
	.content-down {
		margin: 36rpx 12rpx;
		background-color: white;
		height: 182rpx;
		border: 2rpx solid #D1D1D1;
		border-radius: 24rpx;
	}

	.list {
		padding: 10rpx;
		line-height: 70rpx;
		display: flex;
		align-items: center;
	}

	.hr {
		height: 2rpx;
		background-color: #D1D1D1;
	}

	.list image {
		height: 42rpx;
		flex: 1;
	}

	.txt {
		flex: 7;
	}
</style>
